<template>
  <div class="contact-container" v-if="data">
    <ul>
      <li>
        <a>
          <Icon type="github" :size="24" />
          <span>{{data.githubName}}</span>
        </a>
      </li>
      <li>
        <a :href="`mailto:${data.mail}`">
          <Icon type="note" :size="24" />
          <span>{{data.mail}}</span>
        </a>
      </li>
      <li>
        <a>
          <Icon type="qq" :size="24" />
          <span>{{data.qq}}</span>
          <div class="code-qq">
            <img :src="data.qqQrCode" alt="" />
          </div>
        </a>
      </li>
      <li>
        <a>
          <Icon type="weixin" :size="24" />
          <span>{{data.weixin}}</span>
          <div class="code-weixin">
            <img :src="data.weixinQrCode" alt="" />
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import Icon from "@/components/Icon/index.vue";

//获取数据仓库中的全局设置
import {mapState} from "vuex";


export default {
  name: "Contact",
  components: { Icon },
  computed:{
    ...mapState('setting',['data'])
  }
};
</script>

<style scoped lang="less">
@import "~@/styles/global.less";
.contact-container {
  width: 100%;
  margin-top:20px;
  color: @gray;
  li {
    padding:0 10px;
    height:44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;
    a {
      i {
        margin-right: 10px;
      }
      div {
        position: absolute;
        background:#fff;
        padding: 5px;
        border-radius: 4px;
        box-shadow: 0 0 2px #fff;

        left: 40px;
        bottom: 35px;
        transform: scaleY(0);
        transform-origin: center bottom;
        img {
          width: 100px;
          height: 100px;
          display: block;
        }
        &::after {
          content: "";
          position: absolute;
          display: block;
          border: 10px solid transparent;
          border-top-color: #fff;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
    
    a:hover {
      color: @link;
      .code-qq {
        transition: 0.5s;
        transform: scaleY(1);
      }
      .code-weixin {
        transition: 0.5s;
        transform: scaley(1);
      }
    }
  }
}
</style>